<template>
	<view class="">

		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<Loading class="loading-box" v-show="!isLoading" :isStatus='loadStatus'></Loading>

		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">
			<view class="" v-if="orderInfo.orderType==4">
				<view class="oi-detail">


					<view class="oi-header">
						<view class="oi-order-status">
							<view class="tit-style">
								<text v-if="orderInfo.order_status==0 && orderInfo.pay_status==0" class="red-color">待支付
									<text class="cuIcon-right"></text></text>
								<text v-if="orderInfo.order_status==0 && orderInfo.pay_status==1"
									class="blue-color">等待商家确认 <text class="cuIcon-right"></text></text>
								<text v-if="orderInfo.order_status==4">订单完成 <text class="cuIcon-right"></text></text>
								<text v-if="orderInfo.order_status==3">订单取消 <text class="cuIcon-right"></text></text>
								<text
									v-if="orderInfo.order_status==1 && orderInfo.pay_status==1 && orderInfo.logistica_sn==0"
									class="blue-color">正在备货中 <text class="cuIcon-right"></text></text>

								<text v-if="orderInfo.logistica_sn!=0 && orderInfo.order_status==1"
									class="blue-color">已发货,运输中 <text class="cuIcon-right"></text></text>



								<!-- <text v-if="orderInfo.order_status==2 && orderInfo.shipping_status==0" class="blue-color">等待骑手取餐 <text class="cuIcon-right"></text></text>
								<text v-if="orderInfo.order_status==2 && orderInfo.shipping_status==1" class="blue-color">骑手配送中 <text class="cuIcon-right"></text></text> -->

								<text v-if="orderInfo.order_status==5">商家已拒绝接单 <text class="cuIcon-right"></text></text>
								<text v-if="orderInfo.order_status==6" class="red-color">退款处理中 <text
										class="cuIcon-right"></text></text>
							</view>
						</view>
						<view class="oi-thank">
							<!-- 2021 05 11 xh 修改订单信息 -->
							<text v-if="orderInfo.cancel_desc==null">感谢您的信任，期待再次光临</text>
							<text v-html="orderInfo.cancel_desc" v-if="orderInfo.cancel_desc!=null"></text>
						</view>
						<view class="oi-order-btn">
							<text class="order-btn" v-if="orderInfo.order_status==0"
								@click="cancelOrder(orderInfo.order_id)">取消订单</text>
							<text class="order-btn order-btn-blue"
								v-if="orderInfo.order_status==0 && orderInfo.pay_status==0"
								@click="pay(orderInfo.order_id)">立即支付</text>
							<text class="order-btn" v-if="orderInfo.order_status==1 && orderInfo.logistica_sn!=0"
								@click="confirmOrder(orderInfo.order_id)">确认收货</text>
							<text class="order-btn order-btn-blue"
								v-if="orderInfo.order_status==4 && orderInfo.commentNum==0"
								@click="comment(orderInfo.order_id)">立即评价</text>
							<text class="order-btn" @click="buyagain">再来一单</text>
							<text class="order-btn" v-if="orderInfo.order_status==4 && orderInfo.is_after_sale==0"
								@click="aftersale(orderInfo.order_id)">申请售后</text>

							<text v-if="orderInfo.logistica_sn!=0 && orderInfo.order_status==1" class="blue-color"
								@click="viewLogistics">查看物流</text>

						</view>
					</view>

					<!-- 	售后信息 -->
					<view class="oi-header" v-if="orderInfo.onlineafter">
						<view class="tit-style">
							售后信息
						</view>
						<view>
							<text>处理状态：</text>
							<text v-if="orderInfo.onlineafter.status == 0" style="color: #666666;"
								class="after-status">未处理</text>
							<text v-else-if="orderInfo.onlineafter.status == 1" style="color: #00A0DC;">已同意</text>
							<text style="color: #F43F3B;" v-else-if="orderInfo.onlineafter.status == 2">已拒绝</text>
						</view>
						<view class="comment-head">
							<text>申请时间：</text>
							<text class="comment-time">{{orderInfo.onlineafter.created_at}}</text>
						</view>
						<!-- <view class="comment-head">
                    		<text>退款金额：</text>
                    		<text class="comment-time">￥{{orderInfo.onlineafter.money}}</text>
                    	</view> -->
						<view class="comment-cont">
							<text>申请原因：</text><text>{{orderInfo.onlineafter.cause}}</text>
						</view>
						<view class="comment-imgs margin-top-sm" v-if="orderInfo.onlineafter.imgs">
							<block v-for="(imgurl, index) in orderInfo.onlineafter.imgs" :key="index">
								<image :src="imgurl" mode="aspectFill"
									@click="previewImg(imgurl,orderInfo.onlineafter.imgs)"></image>
							</block>
						</view>
						<view class="reply-box" v-if="orderInfo.onlineafter.refuse_cause">
							<view class="reply-content">拒绝原因：{{orderInfo.onlineafter.refuse_cause}}</view>
						</view>
					</view>
					<!-- 	售后信息 -->



					<view class="oi-goods">
						<view class="oi-shop-info">
							<view class="oi-shop-title"
								style="display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<text>{{orderInfo.shop.shop_name || '--'}}</text>
							</view>
							<view class="call" @click="call(orderInfo.shop.mobile)">
								<uni-icons type="phone" color="#000000" size="25"></uni-icons>
							</view>
						</view>
						<view class="line-gray">

						</view>
						<view class="oi-goods-list">
							<view class="oi-goods-item" v-for="(item,index) in orderInfo.order_goods" :key="index">
								<image class="goodsThumb" :src="(Array.isArray(item.thumb)?item.thumb[0]:item.thumb)"
									@error="errorImg(index)" mode="aspectFill"></image>

								<view class="goods-detail">
									<view class="goodsName ellipsis">{{item.goods_name}}</view>
									<view class="goodsSpec" v-if="item.spec_item_name">
										<text>{{item.spec_item_name}}</text>
									</view>
									<view class="goodsNum" v-if="item.goods_num">X{{item.goods_num}}</view>
								</view>
								<view class="goods-price">
									<view class="realprice"><text>￥{{item.goods_amount}}</text></view>
									<view class="markprice" v-if="item.goods_amount!=item.goods_total_price">
										<text>￥{{item.goods_total_price}}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="line-gray margin-top">

						</view>

						<view class="oi-fee-item"
							v-if="orderInfo.order_bill.delivery_fee > 0 && orderInfo.order_bill.delivery_fee">
							<text class="oi-tit">配送费</text>
							<text>￥{{orderInfo.order_bill.delivery_fee}}</text>
						</view>
						<view class="oi-fee-item" v-if="orderInfo.order_bill.full_reduction_price > 0">
							<text class="oi-tit red-color tit-box">满减</text>
							<text class="minusfee">-￥{{orderInfo.order_bill.full_reduction_price}}</text>
						</view>
						<view class="oi-fee-item" v-if="orderInfo.order_bill.first_reduction_price > 0">
							<text class="oi-tit red-color tit-box">首单</text>
							<text class="minusfee">-￥{{orderInfo.order_bill.first_reduction_price}}</text>
						</view>
						<view class="oi-fee-item" v-if="orderInfo.full_gift">
							<text class="oi-tit red-color tit-box">赠送</text>
							<text>{{orderInfo.order_bill.full_gift}}</text>
						</view>


						<view class="oi-fee-item" v-if="orderInfo.order_bill.coupon_price > 0">
							<text class="oi-tit red-color ">优惠券</text>
							<text class="minusfee">-￥{{orderInfo.order_bill.coupon_price}}</text>
						</view>
						<view class="line-gray">

						</view>
						<view class="oi-fee-item">
							<text class="tit-style ">实付款</text>

							<view class="">
								<text v-if="orderInfo.order_bill.user_money > 0"
									class="use-style">使用余额￥{{orderInfo.order_bill.user_money}} </text>
								<text v-if="orderInfo.order_bill.integral_money > 0"
									class="use-style">使用积分￥{{orderInfo.order_bill.integral_money}} </text>

								<text
									class="total-price tit-style">￥{{orderInfo.order_bill.online_amount || 0.00}}</text>
							</view>

						</view>
					</view>


					<view class="oi-orther-detail ">
						<view class="oi-orther-item ">
							<text class="oi-tit ">期望时间：</text>
							<text class="gray-color " v-if="orderInfo.reserve_time">{{orderInfo.reserve_time}}</text>
							<text class="gray-color " v-else>立即配送</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">支付方式：</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxpay'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxgzh'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='wxpayApp'">微信</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='alipay'">支付宝</text>
							<text class="gray-color" v-if="orderInfo.pay_code =='other'">其他</text>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit ">收货地址：</text>
							<view>
								<view><text
										class="gray-color">{{orderInfo.consignee || '--'}},{{orderInfo.mobile || '--'}}
									</text></view>
								<view><text class="gray-color">{{orderInfo.address || '--'}}</text></view>
							</view>
						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">订单编号：</text>
							<text class="gray-color oi-order-text"
								style="letter-spacing:5rpx">{{orderInfo.order_sn}}</text>
						</view>
						<view class="oi-orther-item" v-if="orderInfo.logistica_sn!=0 && orderInfo.logistica_sn!='null'"
							@click="copyData(orderInfo.logistica_sn)">
							<text class="oi-tit">物流编号：</text>
							<text class="oi-order-text text-right"
								style="letter-spacing:5rpx">{{orderInfo.logistica_sn}}
								<text class="copy-box">
									复制
								</text>
							</text>


						</view>
						<view class="oi-orther-item">
							<text class="oi-tit">订单时间：</text>
							<text class="gray-color oi-order-text">{{orderInfo.created_at || '--'}}</text>
						</view>

						<view class="oi-orther-item" v-if="orderInfo.user_note">
							<text class="oi-tit">备注：</text>
							<text class="gray-color oi-order-text">{{orderInfo.user_note || '--'}}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="foot">

			</view>
		</scroll-view>
	</view>


</template>

<script>
	import uniIcons from "@/app/ShopCenter/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				title: "订单详情",
				order_id: 0,
				StatusBar: this.Custom,
				orderInfo: {
					shop: {},
					order_bill: {}
				},
				cartInfo: {},
				cartList: {},
				cartGoodsNum: {},
				goodsList: {},
				timeID: 0,
				swiperHeight: '0px',
				logistics: null,
			}
		},
		onLoad(option) {
			this.order_id = option.order_id;


		},
		onShow() {
			this.getOrder();
		},
		onHide(e) {
			// clearInterval(this.timeID)
		},
		onPullDownRefresh() {
			this.getOrder()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		mounted() {
			// this.timeID = setInterval(()=> {
			// 	this.getOrder();
			// }, 60000);
			this.getInfo().then((e) => {

				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);

			});

		},
		methods: {
			errorImg(index) { //图片加载失败给出默认图
				this.orderInfo.order_goods[index].thumb = this.resDomain + "/static/img/error.png";
				this.$set(this.orderInfo.order_goods, index, this.orderInfo.order_goods[index]);
			},
			errorLogo() {
				this.$nextTick(() => {
					this.orderInfo.shop.logo = this.resDomain + "/static/img/error.png";
				})
			},
			getOrder() {
				this.apiRequest('/buyer/orderInfo', {
					order_id: this.order_id
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						uni.showModal({
							title: "获取信息失败",
							content: res.msg,
							showCancel: false,
							success: () => {
								uni.navigateBack({
									delta: 1
								})
							}
						})
						return

					}

					this.orderInfo = res.data;
					this.isLoading = true;

				})
			},
			call(phone) {
				if (!phone) {
					uni.showToast({
						title: "商家未设置",
						icon: "none"
					})
					return false
				}


				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			cancelOrder(order_id) {
				this.apiRequest('/buyer/cancelOrder', {
					order_id: order_id
				}).then(res => {
					if (res.code == 200) {
						this.getOrder()
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},
			confirmOrder(order_id) {
				this.apiRequest('/buyer/OrderConfirm', {
					order_id: order_id
				}).then(res => {
					if (res.code == 200) {
						this.getOrder(this.order_id)
					}
					uni.showToast({
						title: res.msg
					})
				})
			},
			aftersale(order_id) {
				uni.navigateTo({
					url: '/app/ShopCenter/pages/afterSale?order_id=' + order_id + "&type=shopCenter"
				});
			},
			comment(order_id) {
				uni.navigateTo({
					url: '/app/TakeOut/pages/user/commentOrder?order_id=' + order_id + "&type=shopCenter"
				});
			},
			pay(order_id) {
				uni.navigateTo({
					url: '/app/ShopCenter/pages/pay?order_id=' + order_id
				});
			},
			copyData(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			buyagain() {
				this.goodsList = this.orderInfo.order_goods;
				if (this.orderInfo.order_goods.length > 0) {
					for (var key in this.orderInfo.order_goods) {
						if (this.cartGoodsNum[this.goodsList[key].goods_id] > 0) {
							this.cartGoodsNum[this.goodsList[key].goods_id] += this.goodsList[key].goods_num
						} else {
							this.$set(this.cartGoodsNum, this.goodsList[key].goods_id, this.goodsList[key].goods_num)
						}
						var cart = {}
						this.$set(cart, 'goods_id', this.goodsList[key].goods_id)
						this.$set(cart, 'num', this.goodsList[key].goods_num)
						this.$set(cart, 'item', this.goodsList[key].spec_item_key)
						this.$set(this.cartList, key, cart)
					}
				}

				this.apiRequest('/buyer/addCart', {
					cartList: this.cartList,
					shop_id: this.orderInfo.shop_id
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.msg
						})
						return
					}
					this.cartInfo = res.data
					uni.setStorageSync('cartInfo-' + this.orderInfo.shop_id + "-order", this.cartInfo)
					uni.setStorageSync('cartList-' + this.orderInfo.shop_id + "-order", this.cartList)
					uni.setStorageSync('cartGoodsNum-' + this.orderInfo.shop_id + "-order", this.cartGoodsNum)
					uni.navigateTo({
						url: '/app/ShopCenter/pages/orderSub?shop_id=' + this.orderInfo.shop_id +
							"&good_id=-order"
					});
				})

			},
			previewImg(src, urls) {
				uni.previewImage({
					current: src,
					urls
				})
			},
			//查看物流
			viewLogistics() {

				uni.navigateTo({
					url: "./viewLogistics?order_id=" + this.orderInfo.order_id
				})

			}


		},
	}
</script>

<style scoped>
	view {
		line-height: 1.8;
	}

	.oi-detail {
		width: 94%;
		margin-left: 3%;
		height: 100%;
		margin-top: 10upx;
	}

	.line-gray {
		width: 100%;
		height: 2upx;
		background-color: #EEEEEE;
		opacity: 0.4;
		margin: 20upx 0 20upx 0;
	}

	.use-style {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-right: 10upx;
	}

	.oi-header,
	.oi-deliver,
	.oi-goods,
	.oi-fee,
	.oi-total,
	.oi-orther-detail {
		background: #FFFFFF;
		padding: 30rpx 5%;
		margin-bottom: 15rpx;
		border-radius: 20rpx;

	}

	.oi-header .oi-order-status {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.oi-header .oi-thank {
		color: #666666;
		font-size: 24rpx;
	}

	.oi-thank {
		padding: 5upx 0 5upx 0;
	}

	.oi-header .oi-order-btn {
		margin-top: 15rpx;
	}

	.oi-header .oi-order-btn text {
		padding: 10rpx 20rpx;
		margin-right: 15rpx;
		border-radius: 20rpx;
		border: solid 1px #dbdbdb;
		font-size: 28rpx;
		/* color: #999999; */
	}

	.oi-header .oi-order-btn .order-btn-blue {
		background-color: #3589f7;
		color: #FFFFFF;
		border-radius: 20rpx;
	}

	.oi-deliver {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.oi-deliver .horseInfo .notice {
		color: #1270e0;
		font-size: 18rpx;
	}

	.oi-deliver .horseInfo .ps-ico {
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.oi-shop-info {
		display: flex;
		align-items: center;
	}

	.oi-deliver .call,
	.oi-shop-info .call {
		margin-left: auto;
	}

	.oi-goods .oi-shop-info {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.oi-goods .oi-shop-info .oi-shop-logo {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		margin-top: 8rpx;
	}

	.oi-goods .oi-shop-info .oi-shop-title {
		margin-left: 10rpx;
		font-weight: bold;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.oi-goods-list {
		margin-top: 40rpx;
	}

	.oi-goods-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-bottom: 15rpx;
	}

	.oi-goods-item view {
		line-height: 1.4;
	}

	.oi-goods-item .goodsThumb {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.oi-goods-item .goods-detail {
		margin-left: 10rpx;
		width: 65%;
	}

	.oi-goods-item .goods-detail .goodsName {
		width: 100%;
		font-weight: bold;
	}

	.oi-goods-item .goods-detail .goodsSpec text {
		font-size: 20rpx;
		margin-right: 15rpx;
		color: #666666;
	}

	.oi-goods-item .goods-detail .goodsNum {
		font-size: 20rpx;
		margin-top: 10rpx;
	}

	.oi-goods-item .goods-price {
		margin-left: auto;
		width: 15%;
		text-align: right;
	}

	.oi-goods-item .goods-price .markprice {
		font-size: 24rpx;
		margin-top: 15rpx;
		text-decoration: line-through;
		color: #666666;
	}

	.oi-fee-item {
		min-height: 80upx;
		align-items: center;
	}

	.oi-fee-item,
	.oi-orther-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 10rpx;
		font-size: 28rpx;
		width: 100%;
	}

	.oi-fee-item .minusfee {
		color: #FF3333;
	}

	.oi-total {
		text-align: right;
	}

	.oi-tit {

		white-space: nowrap;
	}

	.oi-total .total-prom {
		color: #666666;
		font-size: 24rpx;
	}

	.oi-total .total-price {
		font-weight: bold;
		margin-left: 10rpx;
	}

	.oi-orther-item {
		display: flex;
		min-height: 80upx;
		justify-content: space-between;
	}

	.oi-orther-item view {
		text-align: right;
	}

	.oi-orther-item .tit {
		color: #666666;
		width: 20%;
	}

	.oi-orther-item .copy-btn {
		margin-left: auto;
	}

	.tit-box {
		padding: 5rpx 15rpx 5rpx 15rpx;
		background: #FFF0F0;
		border: 2upx solid #F4D5D5;
		border-radius: 10upx;
	}

	.tit-style {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.oi-order-text {
		word-wrap: break-all;
		word-break: break-word;
		text-align: right;
	}

	.copy-box {

		height: calc(100vw*(45/750));
		font-size: calc(100vw*(24/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #1270E0;

	}

	/**
	 * 售后样式
	 */
	.comment-imgs {
		display: flex;
		flex-direction: row;

		justify-content: flex-start;
	}

	.comment-imgs image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 15rpx;
		border-radius: 20rpx;
	}
</style>
